<template>
	<view class="details_item bg_color pdd_bottom2">
		<view v-if="!isEnter && !isDelete">
			<view>
				<view class="tit">
					<view class="text">举报信息</view>
				</view>
				<Details :detalisData="detalisData" :detalisList="detalisList"></Details>
				<view class="tit">
					<view class="text">举报人信息</view>
				</view>
				<view style="margin-bottom: 16rpx">
					<Details :detalisData="detalisData" :detalisList="detalisList1">
					</Details>
				</view>
					<view class="tit" v-if="detalisData.reportStatus == 1 || (store.isFuJing() && !store.isMe(detalisData.userId))">
						<view class="text">受理结果</view>
						<view class="xing" v-if="!detalisData.reportStatus">*</view>
					</view>
					<Form v-if="detalisData.reportStatus == 0 && store.isFuJing() && !store.isMe(detalisData.userId)" ref="formRef" :formList="formList" :formData="detalisData.rectificationResults"></Form>
					<Details
						 v-if="detalisData.rectificationResults && detalisData.reportStatus == 1"
						:detalisData="detalisData.rectificationResults"
						:detalisList="
							formList.map((item) => {
								return {
									label: item.label,
									field: item.prop,
									slot: item.prop == 'acceptorStatus',
								};
							})
						"
					>
						<template #data="{ data }">
							<view :class="{ red: data.data == 1, green: data.data == 2, yellow: data.data == 3 }" class="state_view">
								<view class="drop"></view>
								<view class="state font28">{{ formList.find((item) => item.prop == data.field).columns.find((i) => i.value == data.data).name }}</view>
							</view>
						</template>
					</Details>
			</view>
			<ButtonFc :detalisData="detalisData" @shangbao="shangbao" @edit="edit" @deleteItem="(deleteShow = true), (deleteId = detalisData.id)"></ButtonFc>
		</view>
		<SubmitState v-if="isEnter" :success="success" @successReturn="fanhui" @failReturn="isEnter = false"></SubmitState>
		<DeleteState v-if="isDelete" :success="success1" @successReturn="fanhui" @failReturn="isDelete = false"></DeleteState>
	</view>
	<DeleteModal :deleteShow="deleteShow" @confirm="confirm" @close="deleteShow = false"></DeleteModal>
</template>
<script>
	import changeData from 'utils/changeData.js'
export const formList = [
	{
		label: '受理人姓名',
		prop: 'acceptorName',
		type: 'text',
		placeholder: '请输入受理人姓名',
		rules: [
			{
				required: true,
				message: '请输入受理人姓名',
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '职务',
		prop: 'acceptorPosition',
		type: 'text',
		placeholder: '请输入职务',
		rules: [
			{
				required: true,
				message: '请输入职务',
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '工作单位',
		prop: 'acceptorUnit',
		type: 'text',
		placeholder: '请输入工作单位',
		rules: [
			{
				required: true,
				message: '请输入工作单位',
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '联系方式',
		prop: 'acceptorPhone',
		type: 'text',
		placeholder: '请输入联系方式',
		rules: [
			{
				required: true,
				message: '请输入联系方式',
				pattern: changeData.phonePattern,
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '受理时间',
		prop: 'acceptorTime',
		type: 'datetime',
		placeholder: '请选择时间',
		mode: 'datetime',
		rules: [
			{
				required: true,
				message: '请选择时间',
				trigger: ['change', 'blur']
			}
		],
		format: 'YYYY-MM-DD HH:mm'
	},
	{
		label: '调节情况',
		prop: 'acceptorStatus',
		type: 'popup',
		placeholder: '请选择调节情况',
		rules: [
			{
				required: true,
				message: '请选择调节情况',
				trigger: ['change', 'blur'],
				transform(value) {
					return String(value);
				}
			}
		],
		columns: [
			{ name: '已处理', value: 2 },
			{ name: '三本账', value: 3 }
		]
	},
	{
		label: '情况描述（选填）',
		prop: 'acceptorContent',
		type: 'textarea',
		placeholder: '请输入内容'
	}
];
</script>
<script setup>
import Details from 'com/Details.vue';
import ButtonFc from 'com/ButtonFc.vue';
import DeleteModal from 'com/modal/DeleteModal.vue';
import DeleteState from 'com/modal/DeleteState.vue';
import SubmitState from 'com/modal/SubmitState.vue';
import dayjs from 'dayjs'
import { useDetails } from 'hooks';
import Form from 'com/Form.vue';
const formRef = ref();
const init = async (currentPage) => {
	const res = await api.queryById('complaintsReport',currentPage.options);
	if (!res.rectificationResults.length && !res.reportStatus) {
		res.rectificationResults = detalisData.value.rectificationResults;
	}
	if (res.rectificationResults.length) {
		res.rectificationResults = res.rectificationResults[0];
	}
	setTittle('上报举报结果', '投诉举报详情', res.reportStatus == 0)
	detalisData.value = res;
}
const { store,api, fanhui, edit,setTittle } = useDetails(init, 'report')
const deleteShow = ref(false);
const deleteId = ref('');
const isEnter = ref(false);
const success = ref('');
const isDelete = ref(false);
const success1 = ref('');
const shangbao = () => {
	formRef.value.submit(async () => {
		const res = await api.report('complaintsReport', { ...detalisData.value.rectificationResults, eventId: detalisData.value.id });
		isEnter.value = true;
		success.value = res;
	});
};
const confirm = async () => {
	deleteShow.value = false;
	const res = await api.deleteData('complaintsReport', { id: deleteId.value });
	isDelete.value = true;
	success1.value = res;
};
const detalisData = ref({
	rectificationResults: {
		acceptorName: store.users.username,
		acceptorPosition: '辅警',
		acceptorTime: dayjs().format('YYYY-MM-DD HH:mm'),
		acceptorUnit: store.users.workAddress,
		acceptorPhone: store.users.phone,
		acceptorStatus: '',
		acceptorContent: ''
	}
});
const detalisList = [
	{
		label: 'tittle',
		field: 'complaintsTitle'
	},
	{
		label: '所在地区',
		field: 'province'
	},
	{
		label: '详细地址',
		field: 'complaintsPlace'
	},
	{
		label: '时间',
		field: 'complaintsTime'
	},
	{
		label: 'content',
		field: 'complaintsContent'
	},
	{
		label: '附件',
		field: 'complaintsFile'
	}
];
const detalisList1 = [
	{
		label: '姓名',
		field: 'complaintsName',
		encryption: true
	},
	{
		label: '联系电话',
		field: 'complaintsPhone',
		encryption: true
	},
	{
		label: '身份证号',
		field: 'complaintsCard',
		encryption: true
	}
];
</script>

<style lang="scss" scoped></style>
